import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import TypeNav from './components/TypeNav'
import MyPagination from './components/Pagination'

// 加载 swiper 的配置
import './plugins/swiper'

import './mock/mockServer'

// 加载 element-ui 相关的配置
import './plugins/element'

// 表单验证
import './plugins/validate'

import * as API from '@/api'

// 浏览器控制台不显示非生产环境打包的提示
Vue.config.productionTip = false

// 注册全局组件
Vue.component(TypeNav.name, TypeNav) // 组件标签名由组件内部 name 属性指定
Vue.component(MyPagination.name, MyPagination) // 组件标签名由组件内部 name 属性指定

// 图片懒加载
import VueLazyload from 'vue-lazyload'
import loading from '@/assets/images/loading.gif'
// 在图片界面没有进入到可视范围前不加载,在没有得到图片前先显示 loading 图片
Vue.use(VueLazyload, { // 内部自定义了一个指令 lazy
  loading,  // 指定未加载得到图片之前的 loading 图片
})

new Vue({
  beforeCreate () {
    // 配置全局事件总线
    Vue.prototype.$bus = this
    // 当不使用 VueX 时,可以把接口请求函数全部装在对象当中挂在 Vue 原型身上
    Vue.prototype.$API = API
  },
  render: h => h(App),
  // 注册路由器,所有组件都可以直接访问两个对象: $router 和 $route
  router,
  // 将 store 对象在配置对象当中配置使用,每个组件对象当中都可以通过 this.$store 获取到这个对象
  store,
}).$mount('#app')
